<template>
  <section>
    <div>
      <indication :indicationData="indicationData"></indication>
    </div>
    <div class="grid_2">
      <tag :categoryData="vedioCategory" @tagClick="tagClick"></tag>
    </div>
    <div class="grid_9 newVedio" style="margin-left: 35px;">
      <panel-list :listDatas="newVedioPanel" reverse="false" hLineWidth="720px" vLineHeight="420px" hLineLeft="-30px"
                  hLineTop="-30px" :panelTitle="this.$route.query.tagName" @itemclick="subjectClickHandler">
        <div slot-scope="{item}">
          <div class="flex flex-h flex-justify-space-between">
            <div>
              <p class="article-item-title">{{item.subjectName}}</p>
              <p class="article-item-content">{{item.subjectDesc}}</p>
            </div>
            <div style="padding-top: 10px">
              {{item.subjectType}}
            </div>
            <div class="attention-btn" @click="addLike(item)">
              <i :class="[item.like==true? 'heart-change': 'heart-origin', 'fa', 'fa-heart']"></i>
            </div>
          </div>
        </div>
      </panel-list>
    </div>
  </section>
</template>

<script>
// require styles
import '@/assets/css/vedio-list.css'
import axios from '../../node_modules/axios/dist/axios'
export default {
  data () {
    return {
      newVedioPanel: {
        imageSrc: require('../../static/images/星空背景长图.png'),
        width: '700',
        datas: []
      },
      indicationData: [],
      vedioCategory: []
    }
  },
  components: {
    'postVedioPanel': (resolve) => { require(['./PostVedioPanel'], resolve) },
    'LogoPanel': (resolve) => { require(['./common/LogoPanel'], resolve) },
    'panelList': () => import('./common/PanelList'),
    'indication': () => import('./common/Indication'),
    'tag': () => import('./common/Tag')
  },
  mounted () {
    this.obtainVedioList()
    this.initIndication()
    this.obtainLeftNav()
  },
  watch: {
    '$route' (to, from) {
      this.obtainVedioList()
      this.initIndication()
      this.obtainLeftNav()
    }
  },
  methods: {
    obtainLeftNav () {
      let _this = this
      axios.get('/vedioList/leftNav').then(function (res) {
        _this.vedioCategory = res.data.datas
      })
    },
    tagClick (item) {
      this.$router.push({path: '/vedioShow', query: {tagName: item.name}})
    },
    initIndication () {
      this.indicationData = [
        {name: '视频', path: '/vediolist'},
        {name: this.$route.query.tagName, path: {path: '/vedioShow', query: this.$route.query}}
      ]
    },
    goVedioDetail (item) {
      this.$router.push(`/vediodetail/${item.subjectName}`)
    },

    obtainVedioList (categoryType, filterType) {
      var _this = this
      axios
        .get('/vedioList/getVedio', {
          params: {categoryType: this.$route.query.tagName}
        })
        .then(function (res) {
          _this.newVedioPanel.datas = res.data.datas
        })
    },
    addLike (index) {
      index.like = !index.like
    },
    subjectClickHandler (item) {
      this.$router.push({path: '/vediodetail', query: {subjectName: item.subjectName, subjectType: item.subjectType}})
    }
  }
}
</script>

<style scoped>
  .newVedio {
    position: relative;
  }
  .uploadVedio {
    position: absolute;
    right: 15px;
    top: 5px;
  }
  .article-item-title {
    font-size: 16px;
    margin-top: 10px;
    text-align: left;
    color: darkgrey;
    font-family: "-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif";
  }
  .article-item-content {
    font-size: 14px;
    color: darkgrey;
  }
</style>
